<template>
	<view class="w-100">
		<view class="flex-1 bg-white py-2">
			<view class="flex-1 font-s-2 row font-w-500 text-light-grey">兑换比例：10000贝币=1元；将贝币兑换成现金后再提现</view>
			<view class="flex-1 row-ac mt-1">
				<view class="top-box flex-1 row-a-j-fc">
					<view class="font-s-4">贝币收益</view>
					<view class="row-ac text-main-color font-s-8 font-w mt-1">{{ statistics.integral_total }}</view>
					<view class="income-box row mt-2 font-s-35" @click="takePopup">兑换现金</view>
				</view>
				<view class="top-gap"></view>
				<view class="top-box flex-1 row-a-j-fc" @click="nvaTo('/pages/user/data/report-integral')">
					<view class="font-s-4">现金收益(元)</view>
					<view class="row-ac text-main-color font-s-8 font-w mt-1">{{ balanceInfo.user_balance || 0 }}</view>
					<view class="income-box row mt-2 font-s-35 bg-color">去提现</view>
				</view>
			</view>
		</view>
		<view class="flex-1 mt-2 bg-white py-2">
			<view class="flex-1 mx-3 py-2 row-ac-sb" @click="nvaTo('/pages/user/data/integral-list')">
				<view class="font-s-4">今日总收益<text
						class="ml-1 text-light-grey">({{ statistics.today_points | moneyFilter }}元)</text>
				</view>
				<view class="font-s-6 font-w text-main-color mr-2">{{ statistics.today_points }}<text
						class="font-s-35 ml-1">贝币</text></view>
			</view>
			<view class="flex-1 mx-3 py-2 row-ac-sb" @click="nvaTo('/pages/user/data/integral-list')">
				<view class="font-s-4">今日新增邀请<text class="ml-1 text-light-grey"></text>
				</view>
				<view class="font-s-6 font-w text-main-color mr-2">{{ statsInfo.today_invite || 0 }}<text
						class="font-s-35 ml-1">人</text></view>
			</view>
		</view>
		<view class="flex-1 mt-2 bg-white py-2">
			<view class="flex-1 mx-3 py-2 row-ac-sb">
				<view class="font-s-4">本月收益<text
						class="ml-1 text-light-grey">({{ statistics.this_month_points | moneyFilter }}元)</text></view>
				<view class="font-s-6 font-w text-main-color mr-2">{{ statistics.this_month_points }}<text
						class="font-s-35 ml-1">贝币</text></view>
			</view>
			<view class="flex-1 mx-3 py-2 row-ac-sb">
				<view class="font-s-4">上月收益<text
						class="ml-1 text-light-grey">({{ statistics.last_month_points | moneyFilter }}元)</text></view>
				<view class="font-s-6 font-w  text-main-color mr-2">{{ statistics.last_month_points }}<text
						class="font-s-35 ml-1">贝币</text></view>
			</view>
		</view>
		<view class="flex-1 mt-2 bg-white py-2">
			<view class="flex-1 mx-3 py-2 row-ac-sb" @click="nvaTo('/pages/user/partner/distribution/distribution-set')">
				<view class="font-s-4">累计提现(现金)</view>
				<view class="font-s-6 font-w text-main-color mr-2">{{ balanceInfo.used_amount }}<text
						class="font-s-35 ml-1">元</text></view>
			</view>
			<view class="flex-1 mx-3 py-2 row-ac-sb">
				<view class="font-s-4">现金总收益(现金)</view>
				<view class="font-s-6 font-w text-main-color mr-2">{{ balanceInfo.total_balance }}<text
						class="font-s-35 ml-1">元</text></view>
			</view>
			<view class="flex-1 mx-3 py-2 row-ac-sb">
				<view class="font-s-4">累计贝币兑换(现金)</view>
				<view class="font-s-6 font-w text-main-color mr-2">{{ statistics.extract__points | moneyFilter }}<text
						class="font-s-35 ml-1">元</text></view>
			</view>
			<view class="flex-1 mx-3 py-2 row-ac-sb">
				<view class="font-s-4">贝币总收益<text
						class="ml-1 text-light-grey">({{ statistics.accumulate_points | moneyFilter }}元)</text></view>
				<view class="font-s-6 font-w text-main-color mr-2">{{ statistics.accumulate_points }}<text
						class="font-s-35 ml-1">贝币</text></view>
			</view>

			<view class="flex-1 mx-3 py-2 row-ac-sb">
				<view class="font-s-4">我的邀请人数</view>
				<view class="font-s-6 font-w text-main-color mr-2">{{ statsInfo.all_invite || 0 }}<text
						class="font-s-35 ml-1">人</text></view>
			</view>
		</view>
		<view class="flex-1" style="height: 120rpx;"></view>
		<leson-popup :popupStatu="lesonpopup" @statusChanged="handleStatusChanged">
			<view class="flex-1 py-3">
				<view class="flex-1 mx-3">
					<view class="font-s-4 font-w">贝币兑换现金</view>
					<view class="font-s-2 text-light-grey mt">可兑换余额: {{ statistics.integral_total }}</view>
					<view class="flex-1 exchange-input-box mt-3 row-ac">
						<view class="row-ac ml-3 flex-1">
							<view class="iconfont icon-jinbi"></view>
							<input type="text" value="" v-model="exchange_points"
								class="py-2 font-s-7 font-w px-3 flex-1" />
						</view>
						<view class="font-s-7 font-w text-main-color mr-3" v-if="exchange_amount > 0">
							<text class="ml-1">=</text>
							<text class="ml-1">{{ exchange_amount }}</text>
							<text class="ml-1 font-s-4">元</text>
						</view>
					</view>
					<view class="mt-4 row-ac">
						<view class="short-cut flex-1 row font-s-35" v-for="(item,index) in amountList" :key="index"
							@click="takeNum(item)">
							{{ item.num }}
						</view>
					</view>
					<view class="mt-5 flex-1 row font-s-2 text-light-grey">最低100或100贝币的整数，不足100贝币零头保留下次兑换</view>
					<view class="flex-1 exchange-button mt-3 bg-color row mb-3" @click="takeExchange">立即兑换</view>
				</view>
			</view>
		</leson-popup>
		<view class="flex-1">
			<uni-drawer ref="showLeft" mode="right" :width="190" @change="change($event,'showLeft')">
				<view class="flex-1">
					<view class="flex-1 left-icon" style="margin-left: 96rpx;" @click="navTo('/pages/user/partner/distribution/distribution-set')">
						<view class="row-ac flex-1" style="margin-top: 100rpx;">
							<view class="iconfont icon-xinxitishicopy"></view>
							<view class="font-s-45 ml-2">提现账户</view>
						</view>
						<view class="mt-6 row-ac flex-1" @click="nvaTo('/pages/user/data/report-withdrawal')">
							<view class="iconfont icon-shezhi"></view>
							<view class="font-s-45 ml-2">提现记录</view>
						</view>
						<view class="mt-6 row-ac flex-1" >
							<view class="iconfont icon-jianchagengxin"></view>
							<view class="font-s-45 ml-2">提现列表</view>
						</view>
						<view class="mt-6 row-ac flex-1">
							<view class="iconfont icon-xinxitishicopy"></view>
							<view class="font-s-45 ml-2">贝币列表</view>
						</view>
					</view>
				</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	import {
		userInfoUrl,
		statisticsUrl,
		usersbalanceUrl,
		integralExchangeUrl
	} from '@/api/index.js'
	import {
		distributionstatsUrl
	} from '@/api/promotion'
	import lesonPopup from "@/components/common/leson-popup"
	export default {
		components: {
			lesonPopup
		},
		data() {
			return {
				lesonpopup: false,
				userInfo: '',
				statistics: '',
				statsInfo: '',
				balanceInfo: '',
				amountList: [{
						id: 1,
						num: 10000
					},
					{
						id: 2,
						num: 20000
					},
					{
						id: 3,
						num: 30000
					},
					{
						id: 4,
						num: '全部兑换'
					}
				],
				exchange_points: '',
				exchange_amount: 0
			}
		},
		filters: {
			moneyFilter(val) {
				return (val / 10000).toFixed(2);
			}
		},
		watch: {
			exchange_points(newVal) {
				const integerValue = parseInt(newVal / 100);
				this.countValue = integerValue * 100
				console.log(this.countValue);
				this.exchange_amount = (this.countValue / 10000).toFixed(2);
			}
		},
		mounted() {
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.loginStatus = true
				this.getUserInfo()
				this.getStatistics()
				this.getDistributionstats()
				this.getUsersbalance()
			} else {
				this.loginStatus = false
			}
		},
		onNavigationBarButtonTap(event) {
			if (event.index == 0) {
				this.showDrawer('showLeft')
			}
		},
		methods: {
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
				})
			},
			getDistributionstats() {
				this.$R.get(distributionstatsUrl).then(res => {
					this.statsInfo = res.data
				})
			},
			getStatistics() {
				this.$R.get(statisticsUrl).then(res => {
					this.statistics = res.data
				})
			},
			getUsersbalance() {
				this.$R.get(usersbalanceUrl).then(res => {
					this.balanceInfo = res.data
				})
			},
			calculateActualAmount() {
				const amount = parseFloat(this.form.amount);
				const fee = parseFloat(this.withdrawalFee);
				if (isNaN(amount) || isNaN(fee)) {
					return '0.00';
				} else {
					const actual = amount - fee;
					return actual.toFixed(2);
				}
			},
			takePopup() {
				this.lesonpopup = true
			},
			handleStatusChanged(newVal) {
				this.lesonpopup = newVal
			},
			takeNum(item) {
				console.log(item);
				if (item.id == 1) {
					this.exchange_points = item.num
				} else if (item.id == 2) {
					this.exchange_points = item.num
				} else if (item.id == 3) {
					this.exchange_points = item.num
				} else if (item.id == 4) {
					this.exchange_points = this.statistics.integral_total
				}
			},
			takeExchange() {
				this.$R.post(integralExchangeUrl, {
						points: this.exchange_points
					})
					.then(res => {
						console.log(res.code);
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							this.getDistributionstats()
							this.getUsersbalance()
							this.getStatistics()
							this.exchange_points = ''
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
					.catch(err => {
						console.error('请求失败:', err);
					});
			},
			nvaTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				this[type] = e
			},
			onNavigationBarButtonTap(e) {
				if (this.showLeft) {
					this.$refs.showLeft.close()
				} else {
					this.$refs.showLeft.open()
				}
			},
			onBackPress() {
				if (this.showRight || this.showLeft) {
					this.$refs.showLeft.close()
					this.$refs.showRight.close()
					return true
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.income-box {
		width: 166rpx;
		height: 48rpx;
		border-radius: 24rpx;
		border: 1rpx solid #E45825;
		color: #E45825;
	}

	.top-gap {
		width: 1rpx;
		height: 268rpx;
		background-color: #f3f3f3;
	}

	.exchange-input-box {
		height: 88rpx;
		border-radius: 10rpx;
		background-color: #f9f9f9;

		.icon-jinbi {
			color: #E2A700;
			font-size: 42rpx;
		}
	}

	.short-cut {
		height: 66rpx;
		border-radius: 16rpx;
		border: 1rpx solid #f5f5f5;
		margin-right: 16rpx;

		&:nth-child(4n) {
			margin-right: 0;
		}
	}

	.exchange-button {
		height: 68rpx;
		border-radius: 16rpx;
	}
</style>